<template>
  <div class="statistics" id="charts"></div>
</template>

<script>
const echarts = require("echarts/lib/echarts");
require("echarts/lib/component/title");
require("echarts/lib/chart/pie");
export default {
  name: "Statistics",
  data() {
    return {
      deviceData: [],
      broswerData: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //获取数据
    getData() {
      this.axios
        .get("/component/device")
        .then((res) => {
          if (res.data.code === "200") {
            const device = res.data.data.device;
            const broswer = res.data.data.broswer;
            for (let key in device) {
              let val = {
                name: key,
                value: device[key],
              };
              this.deviceData.push(val);
            }
            for (let key in broswer) {
              let val = {
                name: key,
                value: broswer[key],
              };
              this.broswerData.push(val);
            }
            this.init_echarts();
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.error(err);
          this.$message.error("获取访客设备信息统计失败");
        });
    },
    //初始化echarts
    init_echarts() {
      var chartDom = document.getElementById("charts");
      var myChart = echarts.init(chartDom);
      var option;
      var datas = [this.deviceData, this.broswerData];
      option = {
        title: {
          text: "访客设备-访客浏览器",
          left: "center",
          textStyle: {
            color: "#000000",
            fontWeight: 500,
            fontSize: 14,
          },
        },
        series: datas.map(function (data, idx) {
          let top = idx * 45.3 + 15.3;
          return {
            type: "pie",
            radius: [0, "100%"],
            center: ["50%", "50%"],
            top: top + "%",
            height: "33.33%",
            left: "center",
            width: "90%",
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            label: {
              alignTo: "edge",
              formatter: "{name|{b}}\n{time|{c} 人}",
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: "#999",
                },
              },
            },
            labelLine: {
              length: 15,
              length2: 0,
              maxSurfaceAngle: 80,
            },
            labelLayout: function (params) {
              const isLeft = params.labelRect.x < myChart.getWidth() / 2;
              const points = params.labelLinePoints;
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width;
              return {
                labelLinePoints: points,
              };
            },
            data: data,
          };
        }),
      };
      window.onresize = function () {
        myChart.resize();
      };
      option && myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.statistics {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0px 3px 5px #888888;
}
.statistics:hover {
  box-shadow: 0px 0px 12px #a3bffe;
}
</style>